﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="XamlAnimator.ColorPicker"
	x:Name="UserControl"
	d:DesignWidth="640" d:DesignHeight="480">
	<Canvas>
  <Rectangle Canvas.Left="0" Canvas.Top="0" Width="20" Height="180" >
    <Rectangle.Fill>
      <LinearGradientBrush StartPoint ="0,0" EndPoint="0,1">
        <GradientStop Offset="0.00" Color="#ffff0000"/>
        <GradientStop Offset="0.17" Color="#ffffff00"/>
        <GradientStop Offset="0.50" Color="#ff00ffff"/>
        <GradientStop Offset="0.66" Color="#ff0000ff"/>
        <GradientStop Offset="0.83" Color="#ffff00ff"/>
        <GradientStop Offset="0.33" Color="#ff00ff00"/>
        <GradientStop Offset="1.00" Color="#ffff0000"/>
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  <Canvas x:Name="HueSelector" Height="8" Canvas.Left="0" Canvas.Top="-4">
    <Path Width="5" Height="8" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z " />
    <Path Width="5" Height="8" Canvas.Top="8" Canvas.Left="20" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF000000" Data="F1 M 276.761,316L 262.619,307.835L 262.619,324.165L 276.761,316 Z ">
      <Path.RenderTransform>
        <RotateTransform Angle="180" />
      </Path.RenderTransform>
    </Path>
  </Canvas>
  <Rectangle x:Name="rectHueMonitor" Canvas.Top="0" Canvas.Left="0" Fill="Transparent" Width="20" Height="180" />

  <Canvas Canvas.Top="0" Canvas.Left="20">
    <Rectangle x:Name="rectSample" Width="180" Height="180" Fill="Red"></Rectangle>
    <Rectangle x:Name="rectWhiteGradient" Width="180" Height="180">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" Color="#ffffffff"/>
          <GradientStop Offset="1" Color="#00ffffff"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle x:Name="rectBlackGradient" Width="180" Height="180">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,1" EndPoint="0, 0">
          <GradientStop Offset="0" Color="#ff000000"/>
          <GradientStop Offset="1" Color="#00000000"/>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <Canvas x:Name="SampleSelector" Width="10" Height="10" Canvas.Left="100" Canvas.Top="96">
      <Ellipse Width="10" Height="10" StrokeThickness="3" Stroke="#FFFFFFFF"/>
      <Ellipse Width="10" Height="10" StrokeThickness="1" Stroke="#FF000000"/>
    </Canvas>
    <Rectangle x:Name="rectSampleMonitor" Fill="Transparent" Width="180" Height="180" />
  </Canvas>

  <Canvas Canvas.Top="180" Canvas.Left="0">
    <Rectangle x:Name="SelectedColor" Width="200" Height="20" Fill="Black" />
    <Rectangle Width="60" Height="20" Fill="Black" />
    <TextBlock x:Name="HexValue" Foreground="White" Width="100" Text="#FF0000" FontFamily="Arial" FontSize="11" Canvas.Top="4" Canvas.Left="5"  Height="10" />
  </Canvas>
</Canvas>

</UserControl>